<template>
  <el-form :model="diaryForm" label-width="100px">
    <!-- 日记标题 -->
    <el-form-item label="日记标题" prop="title">
      <el-input v-model="diaryForm.title" placeholder="请输入日记标题"></el-input>
    </el-form-item>

    <!-- 日记内容 -->
    <el-form-item label="日记内容" prop="content">
      <el-input
        type="textarea"
        v-model="diaryForm.content"
        placeholder="请输入日记内容"
        rows="10"
      ></el-input>
    </el-form-item>

    <!-- 选择日期 -->
    <el-form-item label="日期" prop="date">
      <el-date-picker
        v-model="diaryForm.date"
        type="date"
        placeholder="选择日期"
        style="width: 100%;"
      ></el-date-picker>
    </el-form-item>

    <!-- 选择天气 -->
    <el-form-item label="天气" prop="weather">
      <el-select v-model="diaryForm.weather" placeholder="选择天气" style="width: 100%;">
        <el-option label="晴天" value="sunny"></el-option>
        <el-option label="多云" value="cloudy"></el-option>
        <el-option label="雨天" value="rainy"></el-option>
        <el-option label="雪天" value="snowy"></el-option>
      </el-select>
    </el-form-item>

    <!-- 选择心情 -->
    <el-form-item label="心情" prop="mood">
      <el-select v-model="diaryForm.mood" placeholder="选择心情" style="width: 100%;">
        <el-option label="开心" value="happy"></el-option>
        <el-option label="难过" value="sad"></el-option>
        <el-option label="平静" value="calm"></el-option>
        <el-option label="愤怒" value="angry"></el-option>
      </el-select>
    </el-form-item>

    <!-- 图片上传 -->
    <el-form-item label="上传图片">
      <el-upload
        action=""
        list-type="picture-card"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :limit="3"
        accept="image/*"
        :before-upload="handleBeforeUpload"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>

    <!-- 视频上传 -->
    <el-form-item label="上传视频">
      <el-upload
        action=""
        list-type="text"
        :on-preview="handleVideoPreview"
        :on-remove="handleRemove"
        :file-list="videoList"
        :limit="1"
        accept="video/*"
        :before-upload="handleBeforeUpload"
      >
        <el-button size="small" type="primary">上传视频</el-button>
      </el-upload>
    </el-form-item>

    <!-- 提交按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitDiary">提交</el-button>
    </el-form-item>

    <!-- 图片预览对话框 -->
    <el-dialog :visible.sync="previewVisible" width="50%">
      <img :src="previewImageUrl" alt="预览图片" style="width: 100%;" />
    </el-dialog>

    <!-- 视频预览对话框 -->
    <el-dialog :visible.sync="videoPreviewVisible" width="50%">
      <video :src="previewVideoUrl" controls style="width: 100%;"></video>
    </el-dialog>
  </el-form>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const diaryForm = ref({
  title: '',
  content: '',
  date: '',
  weather: '',
  mood: '',
});

// 文件列表
const fileList = ref([]);
const videoList = ref([]);

// 预览相关
const previewVisible = ref(false);
const previewImageUrl = ref('');
const videoPreviewVisible = ref(false);
const previewVideoUrl = ref('');

// 加载本地存储的数据
function loadLocalStorage() {
  const storedData = localStorage.getItem('diaryForm');
  if (storedData) {
    const parsedData = JSON.parse(storedData);
    diaryForm.value = parsedData.diaryForm;
    fileList.value = parsedData.fileList || [];
    videoList.value = parsedData.videoList || [];
  }
}

// 保存数据到本地存储
function saveToLocalStorage() {
  const data = {
    diaryForm: diaryForm.value,
    fileList: fileList.value,
    videoList: videoList.value,
  };
  localStorage.setItem('diaryForm', JSON.stringify(data));
}

// 提交表单
const submitDiary = () => {
  console.log('提交的日记:', diaryForm.value);
  console.log('上传的图片:', fileList.value);
  console.log('上传的视频:', videoList.value);
  // 在这里可以将表单数据和文件列表发送到后端
  saveToLocalStorage(); // 保存到本地存储
};

// 预览图片
const handlePreview = (file) => {
  previewImageUrl.value = file.url;
  previewVisible.value = true;
};

// 预览视频
const handleVideoPreview = (file) => {
  previewVideoUrl.value = file.url;
  videoPreviewVisible.value = true;
};

// 移除文件
const handleRemove = (file, fileList) => {
  console.log('移除文件:', file, fileList);
  if (fileList === this.fileList) {
    this.fileList = fileList;
  } else if (fileList === this.videoList) {
    this.videoList = fileList;
  }
  saveToLocalStorage(); // 保存到本地存储
};

// 上传前的处理
const handleBeforeUpload = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
      const url = e.target.result;
      if (file.type.startsWith('image/')) {
        fileList.value.push({ name: file.name, url: url });
      } else if (file.type.startsWith('video/')) {
        videoList.value.push({ name: file.name, url: url });
      }
      saveToLocalStorage(); // 保存到本地存储
      resolve(true);
    };
    reader.onerror = (error) => {
      reject(error);
    };
  });
};

// 初始化时加载本地存储的数据
onMounted(() => {
  loadLocalStorage();
});
</script>

<style scoped>
.el-form {
  max-width: 600px;
  margin: 0 auto;
}

.el-upload__input {
  display: none;
}
</style>